<template>
    <div>
        <!-- 内容 -->
        <div class="FoundationClass">
            <van-tabs @change="tabsChange" v-model:active="active" type="card" class="FoundationContentStyle"
                title-active-color="#fff">
                <van-tab name="yjcl" title="预警处理"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div class="titlePhotoClass" @click="() => { JKListshow = !JKListshow; }">
                            <div>{{ JKNameYJCL }}</div>
                            <img style="margin: 9px 12px 10px 11px; width: 14px; height: 6px;"
                                src="../../../assets/images/Vector 830.png" />
                        </div>
                    </div>
                    <div class="cardContent">
                        <van-list v-if="showList" v-model:loading="loading1" :finished="finished1" finished-text="没有更多了"
                            @load="GetWarningList_DG">
                            <div style="font-size: 12px;" v-for="item, index in WarningList" :key="index" :class="['card',
                                item.wd.level == null ? 'cardNull' : '',
                                item.wd.level == 'I类（红色预警）' ? 'cardRed' : '',
                                item.wd.level == 'II类（橙色预警）' ? 'cardOrange' : '',
                                item.wd.level == 'III类（黄色预警）' ? 'cardYellow' : '',
                            ]">
                                <p
                                    style="font-size: 14px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 80%;">
                                    {{ item.monitoringitem }}
                                </p>
                                <p>
                                    <span>预警点位：</span>
                                    <span style="color: #0089FF;">{{ item.devicename }}</span>
                                </p>
                                <p>
                                    <span>当前流程：</span>
                                    <span>
                                        {{ item.wd.step == 0 ? '已完结' : item.wp.map((el) => el.stepname).join() }}
                                    </span>
                                </p>
                                <p>
                                    <span>负责人：</span>
                                    <span>
                                        {{ item.wd.step == 0 ? '已完结' : item.wdr.map(i => i.userinfo.userName).join('、')
                                        }}
                                    </span>
                                </p>
                                <p>
                                    <span>预警时间：</span>
                                    <span>{{ item.warningtime }}</span>
                                </p>
                                <p class="cardSpecialText">
                                    <span>预警参数：</span>
                                    <span>{{ item.parameter }}</span>
                                </p>
                                <div class="flexRL">
                                    <van-button v-if="isProjectManager" type="primary" class="cardBtnDel"
                                        @click="delWarning(item)">删除预警</van-button>
                                    <van-button type="primary" :style="{ width: isProjectManager ? '48%' : '100%' }"
                                        class="cardBtn" @click="details(item)">管理流程</van-button>
                                </div>
                            </div>
                        </van-list>
                    </div>
                </van-tab>
                <van-tab name="jczp" title="监测照片"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div class="titlePhotoClass" @click="() => { JKListshow = !JKListshow; }">
                            <div>{{ JKNameZP }}</div>
                            <img style="margin: 9px 12px 10px 11px; width: 14px; height: 6px;"
                                src="../../../assets/images/Vector 830.png" />
                        </div>
                    </div>
                    <div class="reportClass">
                        <van-list v-if="showList2" v-model:loading="loading2" :finished="finished2"
                            finished-text="没有更多了" @load="GetRecognitionList">
                            <div class="Flex DivClass" v-for="item, index in PhotosList" :key="index"
                                @click="LookItem(item)">
                                <div class="specialText">{{ item.imgname }}</div>
                                <div style="width: 5%;">
                                    <svg width="8" height="11" viewBox="0 0 8 11" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M6.46618 5.39507L6.46618 5.39507C6.52787 5.45256 6.52789 5.55037 6.46616 5.60789L6.46596 5.60808L6.46442 5.60948L6.46439 5.60944L6.45898 5.61448L1.73238 10.0191C1.73237 10.0191 1.73237 10.0191 1.73236 10.0191C1.6764 10.0713 1.58986 10.0712 1.53412 10.0192L1.53409 10.0192C1.47235 9.96164 1.47238 9.86383 1.53406 9.80635L5.76115 5.86724L6.15368 5.50145L5.76115 5.13565L1.53417 1.19666C1.53417 1.19666 1.53416 1.19665 1.53416 1.19665C1.47255 1.13923 1.47245 1.04149 1.53425 0.983894L1.53435 0.9838C1.59002 0.931885 1.67661 0.93175 1.73256 0.983889L1.73256 0.98389L6.46618 5.39507Z"
                                            fill="white" stroke="white" />
                                    </svg>
                                </div>
                            </div>
                        </van-list>
                    </div>
                    <!-- <van-uploader ref="uploaderRef" v-model="fileList" :after-read="afterRead" :preview-image="false"> -->
                    <van-floating-bubble v-if="active == 'jczp'" class="floating-bubble" axis="xy" icon="plus"
                        :offset="{ x: 300, y: 400 }" @click="uploadFile" />
                    <!-- </van-uploader> -->

                </van-tab>
                <van-tab name="jcbb" title="监测报表"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div class="titlePhotoClass" @click="() => {
                            JKListshow = !JKListshow;
                        }
                            ">
                            <div>{{ JKNameBB }}</div>
                            <img style="margin: 9px 12px 10px 11px; width: 14px; height: 6px;"
                                src="../../../assets/images/Vector 830.png" />
                        </div>
                        <div class="PhontoClass">
                            <van-tabs v-model:active="Phontoactive" type="card" class="PhontoExtensionStyle"
                                title-active-color="#fff" @click-tab="onClickTab">
                                <van-tab v-for="item in tabList" :key="item.id" :title="item.title"
                                    title-style="font-size: 16px; font-weight: 600;">
                                    <template #title style="height: 100%;">
                                        <div style="display: flex;align-items: center;">
                                            <img :src="Phontoactive == item.id ? item.activeIcon : item.icon
                                                " style="width: 14px; height: 14px;" alt="" srcset="" />
                                            <div style="font-size: 12px; margin-left: 5px;">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                    </template>
                                    <div style="overflow-y: auto;max-height: 55vh;margin-bottom: 50px;">
                                        <van-list v-if="showList3" v-model:loading="loading" :finished="finished"
                                            finished-text="没有更多了" @load="GetData">
                                            <div class="stepsItemContentDiv" v-for="item, index in ProjectjkList_data"
                                                :key="index">
                                                <p
                                                    style="font-size: 12px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 97%;">
                                                    {{ item.reportName }}
                                                </p>
                                                <div class="flexLR">
                                                    <div>
                                                        <p style="font-size: 12px;">
                                                            负责人：<span v-if="item.dutyUserInfos != null">{{
                                                                item.dutyUserInfos.map((i) =>
                                                                    i.userName).join('、')
                                                            }}</span>
                                                        </p>
                                                        <p style="font-size: 10px;color: #BEBEBE;">
                                                            计划上传日期：{{ item.planCreateTime }}
                                                        </p>
                                                        <p style="font-size: 12px;" v-if="item.uploadUserInfo">
                                                            实际上传人：{{ item.uploadUserInfo.userName }}
                                                        </p>
                                                        <p style="font-size: 10px;color: #BEBEBE;"
                                                            v-if="item.uploadTime">
                                                            实际上传日期：{{ item.uploadTime }}
                                                        </p>
                                                    </div>
                                                    <div style="margin-right: 10px;">
                                                        <div v-if="item.fileUrl != null" class="read">已上传</div>
                                                        <div v-else class="unread">未上传</div>
                                                    </div>
                                                </div>
                                                <div class="flexLR">
                                                    <div></div>
                                                    <div v-if="item.fileUrl != null">
                                                        <van-button type="primary" class="btn"
                                                            @click="LookItemPic(item)">查看报告</van-button>
                                                        <van-button type="primary" class="btn"
                                                            style="color: red;margin-left: 20px;"
                                                            @click="delJKReportFile(item)">删除报告</van-button>
                                                    </div>
                                                    <div v-else>
                                                        <van-uploader ref="uploaderRefBb" v-model="fileListBb"
                                                            :after-read="afterReadBb" accept=".pdf,.world,.ppt,.docx"
                                                            :preview-image="false" @click-upload="uploadFileBb(item)">
                                                            <van-button type="primary" class="btn">上传报告</van-button>
                                                        </van-uploader>
                                                    </div>
                                                </div>
                                            </div>
                                        </van-list>
                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
            <!-- 预览 -->
            <LookIframe ref="iframebaseRef" classType="ModelEarlyWarning" title="预览"></LookIframe>
            <!-- 预览图片 -->
            <van-popup class="handlePopup" v-model:show="handleShow" closeable :close-on-click-overlay="false"
                :style="{ width: '90%' }">
                <div style="margin:50px 10px 20px 10px;">
                    <van-image style="width:100%;height: 200px;" :src="baseUrl + lookIframeItem.imgURL" />
                </div>
                <div class="flexLR" style="font-size: 14px;margin: 0 10px;">
                    <div>创建人：<span style="font-size: 12px;">{{ lookIframeItem.users.userName }}</span></div>
                    <div>创建时间：<span style="font-size: 12px;">{{ lookIframeItem.creattime }}</span></div>
                </div>
                <van-divider style="margin: 12px 10px" />
                <div class="flexLR" style="margin: 20px">
                    <van-button type="primary" class="saveBtnDel" @click="delMonitor(lookIframeItem)">删除</van-button>
                </div>
            </van-popup>
            <!-- 处理 -->
            <van-popup class="handlePopup" v-model:show="addHandleShow" closeable :close-on-click-overlay="false"
                :style="{ width: '90%' }">
                <p style="font-size: 18px;margin:12px 15px">添加基坑监测照片</p>
                <p style="font-size: 13.43px;margin:20px 15px 0px 15px;color: #ffffff;"><span
                        style="color: red;">*</span>照片名称
                </p>
                <van-field v-model="fileName" label="" autosize placeholder="请输入" label-align="top"
                    style="background: transparent;" />
                <p style="font-size: 13.43px;margin:12px 15px;color: #ffffff;"><span style="color: red;">*</span>上传照片
                </p>
                <van-uploader v-model="fileList" accept="image" max-count="1" style="margin: 0 20px;">
                    <van-button
                        style="height: 2.1rem;width: 2.1rem;background: transparent;color: #ffffff;border-style:dashed;">
                        <img src="../../../assets/images/workbench/uploadImg.png" alt=""
                            style="width: 100%;height: 100%;">
                    </van-button>
                </van-uploader>

                <div class="flexLR" style="margin: 20px">
                    <van-button type="primary" class="saveBtn2" @click="addHandleShow = false">取消</van-button>
                    <van-button type="primary" class="saveBtn" @click="afterRead">确定</van-button>
                </div>
            </van-popup>

            <van-popup v-model:show="JKListshow" position="bottom" :style="{ height: '50%' }">
                <van-picker show-toolbar title="切换基坑"
                    :model-value="active == 'jczp' ? checkJKZP : active == 'yjcl' ? checkYJCL : checkJKBB" :columns="JKcheckOption.map((item) => {
                        return { text: item.jkname, value: item.id };
                    })
                        " @cancel="() => {
                            JKListshow = false;
                        }
                            " @confirm="updateJK" />
            </van-popup>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, nextTick, onMounted } from "vue";
import {
    GetProjectjkList,
    GetMonitorPhotosList,
    GetJKReportList,
    DelMonitorPhotos,
    AddMonitorPhoto,
    DelJKReportFile,
    UploadJKReportFile,
    GetWarningList,
    DelWarning
} from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import LookIframe from "@/components/LookIframe/index.vue";
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant';
import dayjs from "dayjs";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
    components: {
        LookIframe,
    },
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const route = useRoute();
        const isProjectManager = ref(projectInfo.members && projectInfo.members.filter(i => i.userId == userInfo.id)[0].isProjectManager)
        const active = ref(route.query && route.query.hasOwnProperty('noticename') && route.query.noticename.includes('基坑-监测报表上传') ? "jcbb" : "yjcl");
        const tabList = ref([
            {
                id: 0,
                type: 1,
                title: "日报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
            {
                id: 1,
                type: 2,
                title: "周报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
            {
                id: 2,
                type: 3,
                title: "月报",
                icon: new URL("@/assets/images/data/Group 5-1.png", import.meta.url)
                    .href,
                activeIcon: new URL("@/assets/images/data/Group 5.png", import.meta.url)
                    .href,
            },
        ]);

        const JKList = ref([]);
        const Phontoactive = ref("1");
        const JKListshow = ref(false);

        const checkYJCL = ref([]);
        const JKNameYJCL = ref("--");

        const checkJKZP = ref([]);
        const JKNameZP = ref("--");

        const checkJKBB = ref([]);
        const JKNameBB = ref("--");

        const JKcheckOption = ref([]);
        const DayType = ref(1);

        const showList = ref(false);
        const showList2 = ref(false);
        const showList3 = ref(false);
        const tabsChange = async (e) => {
            active.value = e;
            await doRefresh();
            if (e == "yjcl") {
                // 照片-基坑存在且在列表中找得到
                if (
                    localStorage.getItem("checkJKy") != null &&
                    JKcheckOption.value.some(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKy"))
                    )
                ) {
                    var data = JKcheckOption.value.filter(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKy"))
                    )[0];
                    checkYJCL.value = [data.id];
                    JKNameYJCL.value = data.jkname;
                } else {
                    JKcheckOption.value.length ? (checkYJCL.value = [JKcheckOption.value[0].id]) : [];
                    JKcheckOption.value.length ? (JKNameYJCL.value = JKcheckOption.value[0].jkname) : "---";
                }

                checkYJCL.value.length ? showList.value = true : ''
                // WarningList.value = [];
                // loading1.value = false;
                // finished1.value = false;
                // pageIndex1.value = 1;
                // GetWarningList_DG();
            } else if (e == "jczp") {
                // 照片-基坑存在且在列表中找得到
                if (
                    localStorage.getItem("checkJKz") != null &&
                    JKcheckOption.value.some(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKz"))
                    )
                ) {
                    var data = JKcheckOption.value.filter(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKz"))
                    )[0];
                    checkJKZP.value = [data.id];
                    JKNameZP.value = data.jkname;
                } else {
                    JKcheckOption.value.length ? (checkJKZP.value = [JKcheckOption.value[0].id]) : [];
                    JKcheckOption.value.length ? (JKNameZP.value = JKcheckOption.value[0].jkname) : "---";
                }

                checkJKZP.value.length ? showList2.value = true : ''
                // PhotosList.value = [];
                // loading2.value = false;
                // finished2.value = false;
                // pageIndex2.value = 1;
                // GetRecognitionList();
            } else {
                // 报表-基坑存在且在列表中找得到
                if (
                    localStorage.getItem("checkJKb") != null &&
                    JKcheckOption.value.some(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKb"))
                    )
                ) {
                    var data = JKcheckOption.value.filter(
                        (item) => item.id == JSON.parse(localStorage.getItem("checkJKb"))
                    )[0];
                    checkJKBB.value = [data.id];
                    JKNameBB.value = data.jkname;
                } else {
                    JKcheckOption.value.length ? (checkJKBB.value = [JKcheckOption.value[0].id]) : [];
                    JKcheckOption.value.length ? (JKNameBB.value = JKcheckOption.value[0].jkname) : "---";
                }
                checkJKBB.value.length ? showList3.value = true : ''
                // ProjectjkList_data.value = [];
                // loading.value = false;
                // finished.value = false;
                // pageIndex.value = 1;
                GetData();
            }
        };
        // 获取基坑
        const doRefresh = async () => {
            let fd = CreatedFormData({
                xid: projectInfo.id,
                searchword: "",
                pageIndex: 1,
                pageSize: 99999,
            });
            const res = await GetProjectjkList(fd);
            if (res.data != null) {
                JKcheckOption.value = res.data
            }
        };

        // 获取监测照片
        const PhotosList = ref([]);
        const loading2 = ref(false);
        const finished2 = ref(false);
        const pageIndex2 = ref(1);
        const GetRecognitionList = async () => {
            if (checkJKZP.value.length < 1) {
                finished2.value = true;
                return false
            }
            let fd = CreatedFormData({
                projectjkid: checkJKZP.value[0],
                searchword: "",
                pageIndex: pageIndex2.value,
                pageSize: 10,
            });
            const res = await GetMonitorPhotosList(fd);
            if (res.data) {
                PhotosList.value = PhotosList.value.concat(res.data);
                pageIndex2.value++;
                loading.value = false;
                if (PhotosList.value.length >= res.count) {
                    finished2.value = true;
                }
            }
        };
        // 获取监测日报/周报/月报
        const ProjectjkList_data = ref([]);
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const GetData = async () => {
            if (checkJKBB.value.length < 1) {
                finished.value = true;
                return false
            }
            let fd = CreatedFormData({
                projectId: projectInfo.id,
                type: DayType.value,
                moduleType: 1,
                searchword: "",
                linkId: checkJKBB.value[0],
                pageIndex: pageIndex.value,
                pageSize: 10,
                isUpload: null
            });
            const res = await GetJKReportList(fd)
            if (res.data) {
                res.data.forEach((item) => {
                    item.planCreateTime = dayjs(item.planCreateTime).format('YYYY-MM-DD')
                })
                ProjectjkList_data.value = ProjectjkList_data.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (ProjectjkList_data.value.length >= res.count) {
                    finished.value = true;
                }
            }
        };
        // 报表
        const onClickTab = ({ name, title }) => {
            ProjectjkList_data.value = [];
            loading.value = false;
            finished.value = false;
            pageIndex.value = 1;
            DayType.value = tabList.value.filter((item) => item.id == name)[0].type;
            GetData();
        };
        // 切换基坑
        const updateJK = ({ selectedValues, selectedOptions }) => {
            JKListshow.value = false;
            var data = JKcheckOption.value.filter(
                (item) => item.id == selectedValues[0]
            )[0];
            if (active.value == "jczp") {
                checkJKZP.value = selectedValues;
                JKNameZP.value = data.jkname;
                localStorage.setItem("checkJKz", JSON.stringify(selectedValues));

                PhotosList.value = [];
                loading2.value = false;
                finished2.value = false;
                pageIndex2.value = 1;
                // GetRecognitionList();
            } else if (active.value == "yjcl") {
                checkYJCL.value = selectedValues;
                JKNameYJCL.value = data.jkname;
                localStorage.setItem("checkJKy", JSON.stringify(selectedValues));

                WarningList.value = [];
                loading1.value = false;
                finished1.value = false;
                pageIndex1.value = 1;
                // GetWarningList_DG();
            } else {
                checkJKBB.value = selectedValues;
                JKNameBB.value = data.jkname;
                localStorage.setItem("checkJKb", JSON.stringify(selectedValues));

                ProjectjkList_data.value = [];
                loading.value = false;
                finished.value = false;
                pageIndex.value = 1;
                GetData();
            }
        };

        // 预览
        const iframebaseRef = ref(null);
        const LookItemPic = (filePaths) => {
            nextTick(() => {
                iframebaseRef.value.LookItemPics(filePaths.fileUrl, '');
            })
        };

        //监测照片预览
        const handleShow = ref(false);
        const lookIframeItem = ref({});
        const LookItem = (item) => {
            handleShow.value = true;
            lookIframeItem.value = item;
        }
        const delMonitor = (keysValue) => {
            showConfirmDialog({
                title: '警告',
                message: '确定删除该数据吗？',
            }).then(() => {
                DelMonitorPhotos(CreatedFormData({
                    ids: keysValue.id
                })).then(res => {
                    if (res.code == 0) {
                        handleShow.value = false;
                        showSuccessToast(res.msg)

                        PhotosList.value = [];
                        loading2.value = false;
                        finished2.value = false;
                        pageIndex2.value = 1;
                        GetRecognitionList();
                    } else {
                        showFailToast(res.msg)
                    }
                });
            }).catch(() => {
                // on cancel
            });;
        }

        const addHandleShow = ref(false);
        const fileName = ref('');

        const fileList = ref([])
        const uploaderRef = ref();
        const uploadFile = () => {
            // uploaderRef.value.chooseFile();
            fileName.value = '';
            fileList.value = [];
            addHandleShow.value = true;
        }
        const afterRead = async () => {
            if (fileList.value.length < 1) {
                showFailToast('请上传照片');
                return false
            }
            if (fileName.value == '') {
                showFailToast('请输入照片名称');
                return false
            }
            let fd = new FormData();
            fileList.value.forEach((file) => {
                fd.append("file", file.file);
            });
            fd.append('projectid', projectInfo.id);
            fd.append('projectjkid', checkJKZP.value[0]);
            fd.append('userid', userInfo.id);
            fd.append('filename', fileName.value);

            AddMonitorPhoto(fd).then(res => {
                if (res.code == 0) {
                    showSuccessToast(res.msg);
                } else {
                    showFailToast(res.msg);
                }
                addHandleShow.value = false;

                PhotosList.value = [];
                loading2.value = false;
                finished2.value = false;
                pageIndex2.value = 1;
                GetRecognitionList();
            });
        };

        //删除报表
        const delJKReportFile = (keysValue) => {
            showConfirmDialog({
                title: '警告',
                message: '确定删除该数据吗？',
            }).then(() => {
                DelJKReportFile({ id: keysValue.id }).then(res => {
                    if (res.code == 0) {
                        showSuccessToast(res.msg)

                        ProjectjkList_data.value = [];
                        loading.value = false;
                        finished.value = false;
                        pageIndex.value = 1;
                        GetData();
                    } else {
                        showFailToast(res.msg)
                    }
                });
            }).catch(() => {
                // on cancel
            });;
        }
        const fileListBb = ref([])
        const uploaderRefBb = ref();
        const UploadJKReportItem = ref({})
        const uploadFileBb = (item) => {
            UploadJKReportItem.value = item
        }
        const afterReadBb = async () => {
            if (fileListBb.value.length < 1) {
                showFailToast('请上传报告');
                return false
            }
            let fd = new FormData();
            fileListBb.value.forEach((file) => {
                fd.append("file", file.file);
            });
            fd.append('id', UploadJKReportItem.value.id);
            UploadJKReportFile(fd).then(res => {
                if (res.code == 0) {
                    showSuccessToast(res.msg);
                } else {
                    showFailToast(res.msg);
                }
                fileList.value = [];

                ProjectjkList_data.value = [];
                loading.value = false;
                finished.value = false;
                pageIndex.value = 1;
                GetData();
            });
        };


        // 获取预警处理
        const WarningList = ref([]);
        const loading1 = ref(false);
        const finished1 = ref(false);
        const pageIndex1 = ref(1);
        const GetWarningList_DG = async () => {
            if (checkYJCL.value.length < 1) {
                finished1.value = true;
                return false
            }
            let fm = CreatedFormData(
                {
                    projectid: projectInfo.id,
                    Monitoringitem: '',
                    devicename: '',
                    processtype: 1,
                    pageindex: pageIndex1.value,
                    pagesize: 10,
                    correlationid: checkYJCL.value[0]
                }
            )
            const res = await GetWarningList(fm)
            if (res.data != null) {
                WarningList.value = WarningList.value.concat(res.data);
                pageIndex1.value++;
                loading1.value = false;
                if (WarningList.value.length >= res.count) {
                    finished1.value = true;
                }
            }
        }
        const delWarning = (item) => {
            showConfirmDialog({
                title: '警告',
                message: '确定删除该数据吗？',
            }).then(() => {
                DelWarning(CreatedFormData({ warningid: item.id })).then(res => {
                    if (res.code == 0) {
                        showSuccessToast(res.msg)

                        WarningList.value = [];
                        loading1.value = false;
                        finished1.value = false;
                        pageIndex1.value = 1;
                        GetWarningList_DG();
                    } else {
                        showFailToast(res.msg)
                    }
                });
            }).catch(() => {
                // on cancel
            });;
        }
        const router = useRouter();
        const details = (el) => {
            router.push({
                path: '/WarningDetail',
                query: {
                    id: el.id,
                    type: 1,
                    jkid: checkYJCL.value[0]
                }
            })
        }

        onMounted(() => {
            tabsChange(active.value)
        });

        return {
            active,
            tabList,
            JKList,
            Phontoactive,
            JKListshow,

            checkYJCL,
            JKNameYJCL,

            checkJKZP,
            JKNameZP,

            checkJKBB,
            JKNameBB,

            JKcheckOption,

            loading2,
            finished2,
            PhotosList,
            GetRecognitionList,

            baseUrl,
            ProjectjkList_data,
            loading,
            finished,
            GetData,

            onClickTab,
            tabsChange,
            updateJK,
            iframebaseRef,
            LookItemPic,

            handleShow,
            lookIframeItem,
            LookItem,
            delMonitor,
            addHandleShow,
            fileList,
            fileName,
            uploaderRef,
            uploadFile,
            afterRead,
            delJKReportFile,
            fileListBb,
            uploaderRefBb,
            uploadFileBb,
            afterReadBb,

            WarningList,
            loading1,
            finished1,
            GetWarningList_DG,
            isProjectManager,
            delWarning,
            details,
            showList,
            showList2,
            showList3
        };
    },
});
</script>

<style lang="less" scoped>
.FoundationClass {
    color: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;

    .FoundationContentStyle {
        width: 100%;
        height: 100%;
        --van-tabs-card-height: 70px;

        :deep(.van-tab__text--ellipsis) {
            font-size: 32px;
        }

        :deep(.van-tabs__content) {
            height: 94%;
            width: 100%;
        }

        :deep(.van-tab__panel) {
            height: 98%;
        }

        :deep(.van-tabs__nav) {
            background: none;
        }

        :deep(.van-tabs__nav--card) {
            margin: 0;
            border: none;
        }

        :deep(.van-tab--card) {
            background: url(../../../assets/images/home/大事记.png) no-repeat;
            background-size: 100% 100%;
            color: #8991a2;
            border-right: none;
            margin-right: 2%;
        }

        :deep(.van-tab--card.van-tab--active) {
            background: url(../../../assets/images/home/项目概况.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.FFContentStyle {
    height: 100%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式;
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url("../../../assets/images/Group9436.png") no-repeat;
    background-size: 100% 100%;
}

.Flex {
    display: flex;
    align-items: center;
}

// 基坑概况
.tentClass {
    display: flex;
    justify-content: start;
    padding: 28px 3%;
    background-color: rgba(33, 46, 90, 0.5);
    overflow: auto;
    justify-content: space-around;
    flex-direction: column;
}

.tentClass p {
    width: 100%;
    font-size: 28px;
    border-bottom: 1px solid #728b9a;
}

.tentClass p:last-child {
    border-bottom: none;
}

// 照片
.titlePhotoClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url("../../../assets/images/Group 1000004723.png") no-repeat;
    background-size: 100% 100%;
    margin: 26px 0px 28px 0px;
}

.PhontoClass {
    height: 88%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式;
}

// 报表
.PhontoExtensionStyle {
    width: 100%;
    height: 100%;

    :deep(.van-tabs__wrap) {
        background-color: rgba(33, 46, 90, 0) !important;
        margin: 4px 0;
    }

    :deep(.van-tabs__content) {
        height: 93% !important;
    }

    :deep(.van-tab--card) {
        background: none !important;
        border-right: none;
        margin-right: 2%;
    }

    :deep(.van-tab--card.van-tab--active) {
        background: none !important;
    }
}

.reportClass {
    height: 60vh;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none; // 隐藏滚动条样式
    background: linear-gradient(180deg, rgba(1, 5, 21, 0.40) 0%, rgba(1, 5, 21, 0.60) 97.76%);
    padding: 6px 26px;
    margin-bottom: 80px;
}

.reportClass .DivClass {
    width: 100%;
    font-size: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    height: 92px;
    justify-content: space-between;
    padding-left: 18px;
}

.reportClass .DivClass:last-child {
    border-bottom: none;
}

.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saveBtnDel {
    width: 100%;
    border-radius: 6px;
    background: transparent;
    color: red;
    border: none;
}

.stepsItemContentDiv {
    color: #ffffff;
    background: url('../../../assets/images/workbench/JKBG.png') no-repeat;
    background-size: 100% 100%;
    padding: 26px;
    line-height: 50px;
    font-size: 22px;
    margin-top: 20px;
}

.unread {
    border: 2px solid #F9BA1B;
    color: #F9BA1B;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
}

.read {
    border: 2px solid #187ff5;
    color: #187ff5;
    font-size: 30px;
    width: 130px;
    text-align: center;
    transform: rotate(-15deg);
}

.btn {
    background-color: transparent;
    border: none;
    color: #0089FF;
    padding: 0px;
    font-size: 26px;
}

// 弹窗处理
:deep(.handlePopup) {
    background-color: #111d37;
    color: #ffffff;
}

:deep(.van-field__label) {
    color: #ffffff;
}

:deep(.van-field__control) {
    color: #ffffff;
}

.saveBtn {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #7FA9DB 0%, #93D3EF 97.76%);
    border: none;
}

.saveBtn2 {
    width: 48%;
    height: 66px;
    border-radius: 6px;
    background: linear-gradient(180deg, #FF7D7D 0%, #EE5E5E 100%);
    border: none;
}

//预警处理
.cardContent {
    width: 100%;
    height: 100%;
    height: 60vh;
    overflow-y: auto;
    margin-top: -22px;
    margin-bottom: 100px;
}

.card {
    width: 100%;
    height: 480px;
    margin: 20px 0;
    padding: 20px;
    line-height: 50px;
}

.cardRed {
    background: url('../../../assets/images/workbench/红色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardOrange {
    background: url('../../../assets/images/workbench/橙色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardYellow {
    background: url('../../../assets/images/workbench/黄色预警.png') no-repeat;
    background-size: 100% 100%;
}

.cardNull {
    background: url('../../../assets/images/workbench/暂无分级.png') no-repeat;
    background-size: 100% 100%;
}

.cardSpecialText {
    text-indent: -5em;
    padding-left: 5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100px;
}

.cardBtnDel {
    width: 48%;
    height: 80px;
    line-height: 80px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
    color: red;
}

.cardBtn {
    width: 48%;
    height: 80px;
    line-height: 80px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
}
</style>
